<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { forgot, getCaptchaImage, register } from '@/api/interface/web/user'
// import { md5 } from 'js-md5'
// import { encode } from 'js-base64'
import RegisterForm from './RegisterForm.vue'
import { ElMessage } from 'element-plus'
import ForgetForm from './ForgetForm.vue'
import { isMobile } from '@/utils/common'

const registerFormWidth = isMobile() ? '85%' : '420px'

const fullscreenLoading = ref(false)

const formRef = ref()

const form = reactive<any>({
  username: '',
  password: '',
  code: '',
  captchaSessionId: '',
})

const rules = reactive<any>({
  username: [
    {
      required: true,
      message: '请输入账号',
      trigger: 'blur',
    },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (value.length < 3 || value.length > 15) {
          callback(new Error('账号长度为3-15字符!'))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (value.length < 3 || value.length > 15) {
          callback(new Error('密码长度为3-15字符!'))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
  ],
  code: [
    {
      required: true,
      message: '请输入验证码',
      trigger: 'blur',
    },
  ],
})

// 获取验证码
const captchaImage: any = ref('')
const getCode = async () => {
  fullscreenLoading.value = true
  const res: any = await getCaptchaImage({})
  captchaImage.value = res.img
  form.captchaSessionId = res.sessionId
  fullscreenLoading.value = false
}

const submitForm = () => {
  return new Promise<any>((resolve: any) => {
    formRef.value.validate((valid: any) => {
      let res: any = null
      if (valid) {
        res = form
      }
      resolve(res)
    })
  })
}

const goRegister = () => {
  dialogRegisterVisible.value = true
}

const goForget = () => {
  dialogForgetVisible.value = true
}

//注册
const registerFormRef = ref()
const dialogRegisterVisible = ref(false)
const handleDialogRegisterClose = () => {
  dialogRegisterVisible.value = false
}
const handleDialogRegisterSubmit = () => {
  fullscreenLoading.value = true
  registerFormRef.value.submitForm().then((data: any) => {
    if (data) {
      register(data)
        .then(() => {
          ElMessage({
            message: '注册成功',
            type: 'success',
          })
          dialogRegisterVisible.value = false
        })
        .catch(() => {
          registerFormRef.value.getCode()
        })
        .finally(() => {
          fullscreenLoading.value = false
        })
    } else {
      fullscreenLoading.value = false
    }
  })
}

// 找回密码
const forgotFormRef = ref()
const dialogForgetVisible = ref(false)
const handleDialogForgetClose = () => {
  dialogForgetVisible.value = false
}
const handleDialogForgetSubmit = () => {
  fullscreenLoading.value = true
  forgotFormRef.value.submitForm().then((data: any) => {
    if (data) {
      forgot(data)
        .then(() => {
          ElMessage({
            message: '操作成功，留意邮箱信息!',
            type: 'success',
          })
          dialogForgetVisible.value = false
        })
        .catch(() => {
          forgotFormRef.value.getCode()
        })
        .finally(() => {
          fullscreenLoading.value = false
        })
    } else {
      fullscreenLoading.value = false
    }
  })
}

defineExpose({
  submitForm,
  getCode,
})

onMounted(() => {
  getCode()
})
</script>

<template>
  <div class="login-form-wrapper" v-loading.fullscreen="fullscreenLoading">
    <el-form ref="formRef" :model="form" :rules="rules">
      <div class="username-container form-input-container">
        <div class="label">账号</div>
        <div class="input-container">
          <el-form-item prop="username">
            <el-input v-model="form.username" placeholder="请输入账号" />
          </el-form-item>
        </div>
      </div>
      <div class="password-container form-input-container">
        <div class="label">密码</div>
        <div class="input-container">
          <el-form-item prop="password">
            <el-input v-model="form.password" placeholder="请输入密码" show-password />
          </el-form-item>
        </div>
      </div>
      <div class="code-container form-input-container">
        <div class="label">验证码</div>
        <div class="input-container">
          <el-form-item prop="code">
            <el-input v-model="form.code" placeholder="请输入验证码" />
          </el-form-item>
          <div class="code-img-container" @click="getCode">
            <img :src="captchaImage" alt="" style="margin-top: 0px; width: 100px; height: 32px" />
          </div>
        </div>
      </div>
    </el-form>
    <div class="operation-container">
      <div class="register-container">
        <span @click="goRegister">去注册</span>
      </div>
      <div class="forget-container"><span @click="goForget">忘记密码?</span></div>
    </div>
  </div>

  <BaseDialog v-model="dialogRegisterVisible" :width="registerFormWidth">
    <template #title> 注册 </template>
    <template #buttons>
      <el-button type="info" text bg @click="handleDialogRegisterClose">取消</el-button>
      <el-button type="primary" @click="handleDialogRegisterSubmit" class="loginConfirm"
        >注册</el-button
      >
    </template>
    <RegisterForm ref="registerFormRef" />
  </BaseDialog>

  <BaseDialog v-model="dialogForgetVisible" :width="registerFormWidth">
    <template #title> 找回账号密码 </template>
    <template #buttons>
      <el-button type="info" text bg @click="handleDialogForgetClose">取消</el-button>
      <el-button type="primary" @click="handleDialogForgetSubmit" class="loginConfirm"
        >确认找回</el-button
      >
    </template>
    <ForgetForm ref="forgotFormRef" />
  </BaseDialog>
</template>

<style lang="scss" scoped>
.login-form-wrapper {
  @include rect(100%, auto);
  @include flex(column, center, center);

  .el-form {
    width: 100%;
  }

  .code-container {
    .input-container {
      position: relative;
      .code-img-container {
        width: 120px;
        position: absolute;
        top: 7px;
        right: -12px;
        cursor: pointer;
      }
    }
  }
  .operation-container {
    width: 100%;
    @include flex(row, space-between, center);
    margin-top: 16px;
    pointer-events: none;

    .register-container {
      font-weight: 400;
      font-size: 16px;
      text-decoration: underline;

      span {
        color: var(--theme-color);
      }
    }

    .register-container {
      font-family: 'PingFangSC-Regular';
      font-weight: 400;
      font-size: 16px;
      color: rgba(144, 147, 154, 1);
      span {
        text-decoration: underline;
        cursor: pointer;
        pointer-events: auto;
      }
    }
    .forget-container {
      font-family: 'PingFangSC-Regular';
      font-weight: 400;
      font-size: 16px;
      color: rgb(113, 116, 121);
      span {
        cursor: pointer;
        pointer-events: auto;
      }
    }
    .forget-container:hover {
      span {
        text-decoration: underline;
      }
    }
  }
  .submit-container {
    --el-border-radius-round: 30px;
    .el-button {
      height: 60px;
      width: 418px;
    }
    .submit-text {
      font-family: 'PingFangSC-Medium';
      font-weight: 500;
      font-size: 18px;
      color: rgba(255, 255, 255, 1);
    }
  }
  .form-input-container {
    @include flex(column, flex-start, flex-start);
    .label {
      font-family: 'PingFangSC-Regular';
      font-weight: 400;
      font-size: 14px;
      pointer-events: none;
    }
    .input-container {
      width: 100%;
      --el-component-size: 45px;
      --el-border-radius-base: 8px;
      :deep(.el-input__wrapper) {
        padding-left: 15px;
        padding-right: 20px;
      }
      :deep(.el-form-item__error) {
        padding-left: 0px;
        padding-top: 10px;
        font-size: 14px;
      }
    }
    .label + .input-container {
      margin-top: 10px;
    }
  }
  .form-input-container + .form-input-container {
    margin-top: 20px;
  }
  .protocol-container {
    @include flex(row, flex-start, center);
    margin-bottom: 22px;
    .text-container {
      @include flex(row, flex-start, center);
      margin-left: 7px;
      .tip {
        font-family: 'PingFangSC-Bold';
        font-size: 18px;
        font-weight: bold;
        color: #90939a;
      }
      .protocol-text {
        font-family: 'PingFangSC-Bold';
        font-size: 18px;
        font-weight: bold;
        color: var(--theme-color);
        cursor: pointer;
      }
    }
  }
}
</style>
